<template>
  <div class = "catalogwrapper">
    <div 
    v-for = "item of catalogList"
    :key = "item.id"
    class = "icon">
        <div class = "img-icon">
            <img 
            :src = "item.imgUrl"
            :class = "[item.color]"
            class = "img" >
        </div>
        <div 
        class = "icon-desc" 
        :class = "[item.color]"
        style = "color:'#f00'"
        >
        {{item.desc}}
        </div>
    </div>
    
  </div>
</template>

<script>
export default {
  name: 'homeCatalog',
  props:['catalogList'],
  data(){
      return{
          red:'red',
          orange:'orange',
          green:'green',
          blue:'blue',
          black:'black',
          yellow:'yellow',
          white:'white',

         
      }
  }
  
}
</script>

<style lang = 'stylus' scoped>
.catalogwrapper
    width 100%
    margin:5px auto
    .icon
        width 24%
        margin-top .2rem
        margin-bottom .02rem
        display inline-block
        .img-icon
            width 1rem
            height 1rem
            overflow hidden
            border-radius 1rem
            margin 0 auto
            .img
                height:100%
        .icon-desc
            text-align center
            margin-top .2rem
        .red
            
            background:#ff0000
        .orange
           
            background:green
        .green
            
            background:#FFA500
        .blue
            
            background:#0000ff
        .black
            
            background:#000000
        .yellow
            
            background:#FFFF00
        .white
            
            background:#ffffff

</style>